<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>收银台</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"
    />
    <link rel="stylesheet" href="https://file.zhihuiyouzhan.com.cn/static/plugin/weui/1.1.2/weui.min.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div id="app">
        <!-- header -->
        <header class="header" ref="header">
            <div class="weui-cells weui-cells_form">
                <div class="weui-cell weui-cell_switch">
                    <div class="weui-cell__bd">
                        <span>
                            <img src="img/integration.png" />
                        </span>
                        <p>用{{integ}}积分抵{{integMoney}}元</p>
                    </div>
                    <div class="weui-cell__ft" @click="offset">
                        <input class="weui-switch" type="checkbox">
                    </div>
                </div>
            </div>
            <div class="weui-cell weui-cell_select weui-cell_select-after">
                <div class="weui-cell__hd">
                    <label for="" class="weui-label">
                        <span>
                            <img src="img/favourable.png" />
                        </span>
                        <p>优惠券</p>
                    </label>
                </div>
                <div class="weui-cell__bd">
                    <p @click="clickFavourable(true)" v-if="oilFavourableList.length>0">{{favourableListNew}}</p>
                    <dl v-else>暂无可用优惠券</dl>
                </div>
            </div>
        </header>
        <!-- /header -->
        <!-- article -->
        <article>
            <dl class="shop-tit" ref="shopTit">
                <dl class="weui-cell">
                    <dt>
                        <span>
                            <img src="img/hot.png" />
                        </span>
                        <h3>热销商品推荐</h3>
                    </dt>
                    <dd @click="clickShopShow(true)">查看更多</dd>
                </dl>
            </dl>
            <div class="wrapper" ref="wrapper">
                <ul class="shop-list content">
                    <li v-for="(item,index) in shophostList" v-if="index < 5">
                        <div class="shop-list-img" :style="{background:'url('+item.cover_image+')'}"></div>
                        <div class="shop-list-content">
                            <h4>{{item.goods_name}}</h4>
                            <p>月售{{item.sales}}单</p>
                            <dl>
                                <dt>￥{{item.price}}</dt>
                                <dd>
                                    <i class="shop-minus" @click="shopMinus(0,-1,item.goods_id)"></i>
                                    <span>{{item.num}}</span>
                                    <i class="shop-add" @click="shopAdd($event,0,-1,item.goods_id)"></i>
                                </dd>
                            </dl>
                        </div>
                    </li>
                </ul>
            </div>
        </article>
        <!-- /article -->
        <!-- footer -->
        <footer class="footer" ref="footer">
            <dl @click="orderDetail">
                <i ref="positionNum">{{numSum}}</i>
                <dt>
                    <img src="img/deal.png" />
                </dt>
                <dd>交易详单</dd>
            </dl>
            <div @click="paymentOpen">立即支付￥{{totalMoneyFiexd}}</div>
        </footer>
        <!-- footer -->
        <!-- section -->
        <section>
            <!-- this discount -->
            <dl class="this-discount" ref="discount">
                <dt>
                    <span>
                        <img src="img/discount.png" />
                    </span>本次交易共计优惠</dt>
                <dd>￥{{sumAdvan}}</dd>
            </dl>
            <!-- /this discount -->
            <!-- details -->
            <transition name="details">
                <section class="details" v-show="isDetail">
                    <div class="details-tit">
                        <h3>交易详情</h3>
                        <span @click="detailClose">
                            <img src="img/colse.png" />
                        </span>
                    </div>
                    <h4>油品</h4>
                    <ul>
                        <li>
                            <h5>油品信息</h5>
                            <span>
                                <h5>{{oilName}}</h5>
                                <span>{{oilMoneyNum}}</span>
                            </span>
                        </li>
                        <li>
                            <h5>数量</h5>
                            <p>{{oilL}}L</p>
                        </li>
                        <li>
                            <h5>油枪优惠</h5>
                            <p>-￥{{oilAdvan}}</p>
                        </li>
                        <li>
                            <h5>优惠券优惠</h5>
                            <p>-￥{{favourMoneyNum}}</p>
                        </li>
                        <li>
                            <h5>分时优惠</h5>
                            <p>-￥{{timeAdvan}}</p>
                        </li>
                    </ul>
                    <h4>非油品</h4>
                    <ul>
                        <li v-show="orderList.length==0">
                            <h5>暂无油品信息</h5>
                        </li>
                        <li v-show="orderList.length>0" v-for="(item,index) in orderList">
                            <h5>{{item.goods_name}}</h5>
                            <dl>
                                <dt>￥{{item.price}}</dt>
                                <i class="shop-minus" @click="shopOrderMinus(index)"></i>
                                <span>{{item.num}}</span>
                                <i class="shop-add" @click="shopOrderAdd(index)"></i>
                            </dl>
                        </li>
                    </ul>
                </section>
            </transition>
            <!-- details -->
            <!-- shade -->
            <div class="isshade" v-show="isShade"></div>
            <!-- /shade -->
            <!-- balls -->
            <div v-for="ball in balls">
                <transition @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop" name="drop">
                    <div v-show="ball.show" class="ball">
                        <div class="inner inner-hook" ref="inner"></div>
                    </div>
                </transition>
            </div>
            <!--/balls  -->
            <!-- payment-detail -->
            <transition name="payment">
                <div class="payment-detail" v-show="isPayment">
                    <div class="payment-detail-tit details-tit">
                        <h3>付款详情</h3>
                        <span @click="paymentClose">
                            <img src="img/colse.png" />
                        </span>
                    </div>
                    <div class="payment-detail-list">
                        <dl>
                            <dt>收款油站</dt>
                            <dd>测试站</dd>
                        </dl>
                        <dl @click="selectPayment">
                            <dt>付款方式</dt>
                            <dd>{{paymentNew}}</dd>
                        </dl>
                        <p>
                            <span>国五91#汽油</span>
                            <span>{{oilMoneyNum}}</span>
                        </p>
                        <p>
                            <span>商品总价</span>
                            <span>{{shopMoneyNum}}</span>
                        </p>
                        <p>
                            <span>总共节省</span>
                            <span>{{sumAdvan}}</span>
                        </p>
                    </div>
                    <div class="payment-detail-btn" @click="paymentBtn">
                        <span>确认支付￥{{totalMoneyFiexd}}</span>
                    </div>
                </div>
            </transition>
            <!-- payment-detail -->
            <transition name="select">
                <div class="select-payment" v-show="isOilDetail">
                    <div class="select-detail-tit details-tit">
                        <h3>付款详情</h3>
                        <span @click="paymentReturn">
                            <i class="iconfont icon-fanhui"></i>
                        </span>
                        <div ref="wrappers" class="select-scroll">
                            <ul class="select-list content">
                                <li @click="clickOilWx">
                                    <div>
                                        <span>
                                            <img src="https://ww4.sinaimg.cn/large/a15b4afegy1flyqksuxzxj205k05kq2s">
                                        </span>
                                        <div class="selsect-wx">
                                            微信支付
                                        </div>
                                    </div>
                                    <p v-show="isWxMoney">
                                        <img src="https://ww4.sinaimg.cn/large/a15b4afegy1flyqms4hl3j206k05kwea" />
                                    </p>
                                </li>
                                <li v-for="(item,index) in oilCardList" :class="{'oil-card-bg':item.isMoney}" @click="clickOilList(index,item.isMoney,item.name,item.money)">
                                    <div>
                                        <span>
                                            <img src="https://file.zhihuiyouzhan.com.cn/static/img/phone/card/fuel_card.png">
                                        </span>
                                        <dl>
                                            <dt>{{item.name}}</dt>
                                            <dd v-if="item.isSupport">此油枪不可用</dd>
                                            <dd v-else>余额
                                                <span>￥{{item.money}}</span>
                                            </dd>
                                        </dl>
                                    </div>
                                    <p v-show="index==oilCardIndex">
                                        <img src="https://ww4.sinaimg.cn/large/a15b4afegy1flyqms4hl3j206k05kwea" />
                                    </p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </transition>
            <!-- /payment-detail -->
            <!-- favourable -->
            <transition name="favourable">
                <div class="favourable" v-show="isFavourable">
                    <div class="details-tit favourable-tit">
                        <h3>请选择优惠券</h3>
                        <span @click="clickFavourable(false)"> 确定 </span>
                    </div>
                    <div class="favourable-list" ref="favourable">
                        <ul class="content">
                            <li @click="noFavour">下次再用</li>
                            <li v-for="item in oilFavourableList" @click="clickFavourableList(item.name,item.money)">
                                {{item.name}}（￥{{item.money}}）
                                <span>x{{item.money}}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </transition>
            <!-- /favourable -->
            <!-- googs -->
            <transition name="goods">
                <div class="googs" v-show="isShopList">
                    <div class="payment-detail-tit details-tit">
                        <h3>特惠商品</h3>
                        <span @click="clickShopShow(false)">
                            <img src="img/colse.png" />
                        </span>
                    </div>
                    <div class="goods-list">
                        <div class="goods-list-classify" ref="classify">
                            <ul ref="classifyList">
                                <li :class="{'active':activeIndex==index}" v-for="(item,index) in shopList" @click="clickShopList(index,$event)">{{item.name}}</li>
                            </ul>
                        </div>
                        <div class="goods-scroll">
                            <div class="goods-title">{{goodsTitle}}</div>
                            <!--  -->
                            <div class="goods-list-con" ref="goods">
                                <div class="goods-list-cons content" ref="goodsList">
                                    <!-- ul -->
                                    <ul v-for="(item,index) in shopList">
                                        <h3>{{item.name}}</h3>
                                        <li v-for="(items,indexs) in item.goods">
                                            <!-- item -->
                                            <div class="shop-list-img" :style="{background:'url('+items.cover_image+')'}"></div>
                                            <div class="shop-list-content">
                                                <h4>{{items.goods_name}}</h4>
                                                <p>月售{{items.sales}}单</p>
                                                <dl>
                                                    <dt>￥{{items.price}}</dt>
                                                    <dd>
                                                        <i class="shop-minus" @click="shopMinus(1,item.cateid,items.goods_id)"></i>
                                                        <span>{{items.num}}</span>
                                                        <i class="shop-add" @click="shopAdd($event,1,item.cateid,items.goods_id)"></i>
                                                    </dd>
                                                </dl>
                                            </div>
                                            <!-- item -->
                                        </li>
                                        <li v-if="item.goods.length==0">
                                            <div class="shop-null">此分类暂无商品</div>
                                        </li>
                                    </ul>
                                    <!-- /ul -->
                                </div>
                            </div>
                            <!--  -->
                        </div>

                    </div>
                </div>
            </transition>
            <!-- /googs -->
            <!-- toast loading -->
            <div v-show="isLoading">
                <div class="weui-mask_transparent"></div>
                <div class="weui-toast">
                    <i class="weui-loading weui-icon_toast"></i>
                    <p class="weui-toast__content">支付中</p>
                </div>
            </div>
            <!-- /toast loading -->
            <!-- toast succeed -->
            <div v-show="isSucceed">
                <div class="weui-mask_transparent"></div>
                <div class="weui-toast">
                    <i class="weui-icon-success-no-circle weui-icon_toast"></i>
                    <p class="weui-toast__content">已完成</p>
                </div>
            </div>
            <!-- /toast succeed -->

        </section>
        <!-- /section -->
    </div>
    <!-- js -->
    <aside>
        <script src="js/fastclick.js"> </script>
        <script src="js/bscroll.min.js"></script>
        <script src="js/axios.min.js"></script>
        <script src="js/vue.min.js"></script>
        <script src="js/payment.js"></script>
    </aside>
    <!-- js -->
</body>

</html>